<template>
  <div class="result-card" @click="checkUser">
    <el-card style="height: 150px;line-height: 110px;padding:0px;border: 0px; border-radius:75px; cursor: pointer;"
      :body-style="{ padding: '0px', margin: '0px' }">
      <div
        style="line-height: 150px;height: 150px;vertical-align: center;display:inline-block; text-align: middle;padding-right: 0px;">
        <div style="display:inline-block;vertical-align: center; padding: 10px;">
          <el-avatar :size="130" :src="user.avatar">
          </el-avatar>
        </div>

      </div>
      <div style="display:inline-block; margin: 20px;line-height: 30px;width: 510px;vertical-align: top;">
        <!-- 标题 -->
        <div class="title" style="font-size: 20px; font-weight: 600; ">
          {{ user.username }}
        </div>
        <!-- 简介描述，居于标题下方 -->
        <div class="description" style="height:50px;margin-top: 10px;">
          <p>&nbsp;&nbsp;{{ user.description }}</p>
        </div>
        <!-- 标签列表，横向排列 300-->
        <div style="display:inline-block; width: 350px;">
          <a-tag color="orange" v-for="tag in user.tags" :key="tag">
            {{ tag }}
          </a-tag>
        </div>

      </div>

    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      id: String, //用户id
      username: String, //用户名
      avatar: String, //头像链接
      discription: String, //个人描述
      tags: [], //标签列表
    },
  },
  methods: {
    checkUser() {
      this.$router.push({
        path: '/user',
        //这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
        query: { id: this.user.id },
      })
    },
  },

}
</script>

<style scoped>
.result-card {
  width: 800px;
  padding-bottom: 30px;
  height: 180px;
}

:deep .el-card__body {
  height: 150px;
  padding: 0px;
}

p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>